<template>
  <div class="fillcontain">
    <bt-col-header title="险种规则导航类型"></bt-col-header>
    <div class="page-content">
      <el-form :model="dataForm" @keyup.enter.native="getDataList()" class="" label-width="120px">
        <el-form-item label="类型名称" class="col-md-6">
          <el-input v-model="dataForm.typeName" placeholder="类型名称" clearable></el-input>
        </el-form-item>
        <div class="row">
          <div class="col-md-12 text-center mt-2">
            <rich-button :plain="true" type="info" shape="capsule" icon="search" @click="getDataList()">查询</rich-button>
            <rich-button shape="capsule" icon="quit" @click="resetData()">重置</rich-button>
          </div>
        </div>
        <!-- <el-form-item> -->
          <!-- <el-button @click="getDataList()">查询</el-button> -->
          <!-- <el-button v-if="isAuth('sys:role:save')" type="primary" @click="addOrUpdateHandle('add')">新增</el-button> -->
          <!-- <el-button v-if="isAuth('sys:role:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> -->
        <!-- </el-form-item> -->
      </el-form>
      <div>
        <div class="btn-padding left">
          <el-button v-if="isAuth('sys:role:save')" type="info" plain icon="circle-plus" @click="addOrUpdateHandle('add')">新增</el-button>
        </div>
        <!-- @selection-change="selectionChangeHandle" -->
        <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
          <el-table-column prop="creUserId" header-align="center" align="center" width="80" label="ID">
          </el-table-column>
          <el-table-column prop="name" header-align="center" align="center" label="类型名称">
          </el-table-column>
          <el-table-column prop="remark" header-align="center" align="center" label="备注">
          </el-table-column>
          <el-table-column prop="creTime" header-align="center" align="center" width="180" label="创建时间">
          </el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
            <template slot-scope="scope">
              <el-button v-if="isAuth('sys:role:update')" type="text" size="small" @click="addOrUpdateHandle('edit',scope.row.typeId)">修改</el-button>
              <el-button v-if="isAuth('sys:role:delete')" type="text" size="small" @click="deleteHandle(scope.row.typeId,scope.row.name)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination> -->
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      </div>
    </div>
    
    
  </div>
</template>

<script>
import { listMenuType, rulesList, ruleRiskMenu, menuTypeDelete } from "@/api/rulesmenu";
import { treeDataTranslate } from "@/utils";
import AddOrUpdate from './role-add-or-update'
export default {
  data() {
    return {
      dataForm: {
        typeName: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
    }
  },
  components: {
    AddOrUpdate
  },
  activated() {
    this.getDataList()
  },
  methods: {
    // 重置查询条件
    resetData() {
      this.dataForm.typeName = '';
    },  
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      listMenuType(this.dataForm).then(({ data }) => {
        // console.log(data);
        if (data && data.resultCode === 0) {
          this.dataList = data.data
          this.totalPage = data.data.length
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 获取菜单列表列表
    getrulesList(typeId) {
      rulesList({}).then(({ data }) => {
        this.$nextTick(() => {
          // console.log(data,typeId, "data");
          this.$refs.addOrUpdate.menuList = treeDataTranslate(data.data, "menuId");
          if (typeId) {
            this.geteditList(typeId)
          }
        })
      });
    },
    // 义菜单类型编辑查询
    geteditList(id) {
      ruleRiskMenu(id).then(({ data }) => {
        // console.log(data, "data");
        if (data) {
          this.$nextTick(() => {
            this.$refs.addOrUpdate.dataForm.menuList = data.data.menuList
            let menuList = []

            data.data.menuList.forEach(e => {
              menuList.push(e.menuId)
              // console.log(this.$refs.addOrUpdate);
              this.$refs.addOrUpdate.$refs.menuListTree.setChecked(e.menuId, true);
            });
            this.$refs.addOrUpdate.dataForm.name = data.data.name
            this.$refs.addOrUpdate.dataForm.remark = data.data.remark
            // this.$refs.addOrUpdate.menuListTreeSetCurrentNode(menuList)
          })

        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },

    // 新增 / 修改
    addOrUpdateHandle(operation, typeId) {
      // console.log(typeId,'typeId');
      this.$refs.addOrUpdate.visible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.$refs["dataForm"].resetFields();
        this.$refs.addOrUpdate.menuList = []
        this.$refs.addOrUpdate.dataForm.menuList = []
        this.$refs.addOrUpdate.menuListTreeSetCurrentNode([])
        this.$refs.addOrUpdate.title = '新增'
        if (operation === 'edit') {
          this.$refs.addOrUpdate.title = '修改'
          this.$refs.addOrUpdate.dataForm.typeId = typeId
        }
        this.getrulesList(typeId)
      })
    },
    // 删除
    deleteHandle(id, name) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.roleId
      })
      this.$confirm(`确定对[${name}]进行[删除]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        menuTypeDelete(id).then(({ data }) => {
          if (data && data.resultCode === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              },
            });
          } else {
            this.$message.error(data.resultMsg);
          }
        });
      }).catch(() => { })
    }
  }
}
</script>
